<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工管理系统</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<link rel="stylesheet" type="text/css" href="../static/css/page.css" />
		
		<link href="../static/plugins/css/icons.min.css" rel="stylesheet" type="text/css" />
		
	</head>
	<body>
		<div class="page" id="app">
			<div class="nav-left">
				<div class="LogoName">
					员工管理系统
				</div>
				<div class="navDiv">
					<!-- <div class="navName">导航</div> -->
					<div class="nav-list">
						<ul>
							<li class="nav-tab a_active waves-effect">
								<a href="welcome" class="li-a active" target="iframe"><i class='bx bx-home-smile'></i> 主页
								</a>
							</li>
							
							<li class="nav-tab nav-ul">
								<a href="javascript:void[0]" class="li-a"><i class='bx bx-cog'></i> 员工管理
									<i class='bx bx-chevron-right' style="float: right;"></i></a>
								<div class="nav-box"> 
									<a href="employees_list" class="li-a-a" target="iframe">员工列表</a>
									<a href="employee_add" class="li-a-a" target="iframe">员工添加</a>
									<a href="employee_modify" class="li-a-a" target="iframe">员工修改</a>
								</div>
							</li>
							<li class="nav-tab nav-ul">
								<a href="javascript:void[0]" class="li-a"><i class='bx bx-buildings'></i> 部门管理
									<i class='bx bx-chevron-right' style="float: right;"></i></a>
								<div class="nav-box">
									<a href="add_department" class="li-a-a" target="iframe">部门添加</a>
									<a href="department_modify" class="li-a-a" target="iframe">部门修改</a>
									<a href="department_member_exchange" class="li-a-a" target="iframe">部门人员变动</a>
								</div>
							</li>
							<li class="nav-tab nav-ul">
								<a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 薪资管理
									<i class='bx bx-chevron-right' style="float: right;"></i></a>
								<div class="nav-box">
									<a href="attendance_management" class="li-a-a" target="iframe">考勤管理</a>
									<a href="salary_management" class="li-a-a" target="iframe">薪资基数管理</a>
									<a href="bonus_management" class="li-a-a" target="iframe">奖金管理</a>
								</div>
							</li>
							<li class="nav-tab nav-ul">
								<a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 账号管理
									<i class='bx bx-chevron-right' style="float: right;"></i></a>
								<div class="nav-box">
									<a href="account_add" class="li-a-a" target="iframe">增加账户</a>
									<a href="account_set" class="li-a-a" target="iframe">账户设置</a>
									<a href="my_account" class="li-a-a" target="iframe">我的账户</a>
								</div>
							</li>
						</ul> 
					</div>
				</div>
			</div>
			<div class="nav-right"> 
				<div class="nav-top">
						<div class="sfdhl">欢迎进入员工管理系统</div>
						<a class="sfdhl sfdhlzh" href="">admin</a>
				</div>
				<div class="content-page">
					<iframe name="iframe" width="100%" height="100%" frameborder="0" 
					src="welcome"></iframe>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../static/js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				let navflag = false;
				$('.nav-tab').click(function() {
					$(this).siblings().each(function() {
						$(this).removeClass('a_active');
						// $(this).removeClass('a_active');
						$(this).find('.nav-box').css('height', '0')
						//关闭右侧箭头
						if ($(this).attr('class').indexOf('nav-ul') != -1) {
							$(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
							$(this).find('.bx-chevron-right').css('transition', 'all .5s')
							$(this).removeClass('nav-show')
							// $(this).find('div').removeClass('nav-box')
						}
					})
					//当前选中
					$(this).addClass('a_active')
					$(this).find('.li-a').addClass('active')
					// 打开右侧箭头
					$(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
					$(this).find('.bx-chevron-right').css('transition', 'all .5s')
					$(this).addClass('nav-show')
					// $(this).find('div').addClass('nav-box')
				})
				/* 二级菜单a点击事件 */
				$(".li-a-a").click(function() {
					$(".li-a-a").each(function() {
						$(this).removeClass('active-li-a');
					})
					$(this).addClass('active-li-a');
				})
			})
		</script>
	</body>
</html>
